<template>
  <div>
    <TopCard
      class="p-4"
      :des="`满分100分，${targetSource}达标`"
      :title="'能力评估'"
      :source="sourceAvg"
      :unit="'分'"
      :dimension="evaluationDimension"
      :needStudy="enableImprovement"
      :suggestions="improvementSuggestions"
    />

    <!-- 图表展示 -->
    <CounsellingAbilityCard :items="chartData" />
    <!-- 各维度展示 -->
    <div class="p-4">
      <template v-for="item of tasks" :key="item.content.name">
        <div class="flex flex-col mb-4">
          <div class="flex flex-row items-center">
            <div class="w-[5px] h-[20px] rounded-[2px] bg-yxt-blue mr-4"></div>
            <h2 class="text-[18px] font-bold">{{ item.content.name }}</h2>
            <p
              class="ml-3 text-[18px]"
              :style="{ color: getScoreColor(getScore(item.content.score)) }"
            >
              {{ getScore(item.content.score) }}
            </p>
          </div>
          <markdown :content="item.content.reasonAndEvidence" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import CounsellingAbilityCard from "./CounsellingAbilityCard.vue";
import markdown from "@/components/markdown.vue";
import TopCard from "./component/topCard.vue";
import { useMinutesStore } from "@/store";
import { mapState } from "pinia";

export default {
  name: "CounsellingAbilityAssessment",
  components: {
    CounsellingAbilityCard,
    TopCard,
    markdown,
  },
  data() {
    return {
      showCardDetail: false,
    };
  },

  methods: {
    // 获取分数
    getScore(originScore) {
      return parseInt(originScore.split("/")[0]);
    },

    // 获取最大分
    getMaxScore(originScore) {
      return parseInt(originScore.split("/")[1]) || 100;
    },

    // 根据分数获取颜色
    getScoreColor(score) {
      if (score >= 90) return "#52C41A";
      if (score >= 80) return "#4090FF";
      if (score >= 60) return "#FAAD14";
      return "#FF4D4F";
    },
  },

  computed: {
    ...mapState(useMinutesStore, {
      salesCounsellingReports: "salesCounsellingReports",
      enableImprovement: "enableImprovement",
      targetSource: "targetSource",
    }),

    report() {
      let arr = this.salesCounsellingReports.filter((v) => v.systemId === 205) || [];
      if (arr.length === 0) {
        return {};
      }
      return arr[0].report;
    },

    // 整体评价
    evaluationDimension() {
      return this.report.response?.overallEvaluation || "";
    },

    // 改进建议
    improvementSuggestions() {
      return this.report.response?.improvementSuggestions || [];
    },

    // 任务列表
    tasks() {
      return this.report.tasks || [];
    },

    //总分
    totalSource() {
      return this.tasks.reduce((sum, item) => {
        return this.getScore(item.content.score) + sum;
      }, 0);
    },

    //平均分
    sourceAvg() {
      return (this.totalSource / this.tasks.length).toFixed(0);
    },

    // 图表数据
    chartData() {
      return this.tasks.map((item) => {
        // { text: "需求挖掘", score: 80, max: 100 },
        const { name, score } = item.content;
        return {
          text: name,
          score: this.getScore(score),
          max: this.getMaxScore(score),
        };
      });
    },
  },
};
</script>

<style lang="less" scoped>
:deep .mbody {
  overflow-x: visible;

  p {
    color: #262626ff;
    line-height: 28px;
  }

  li {
    color: #262626ff;
    line-height: 28px;
  }

  ul {
    color: #262626ff;
    line-height: 28px;
  }

  code {
    padding: 2px 4px;
    white-space: normal;
    color: #262626ff;
    line-height: 28px;
  }
}
</style>
